<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SVG demo</title>
    <style>
        .stage {
            display: flex;
            flex-wrap: wrap;
        }

        .stage div {
            margin: 20px;
            height: 100px;
        }

        .red {
            fill: red;
        }

        .fancy {
            fill: none;
            stroke: black;
            stroke-width: 3px;
        }

        .pattern {
            /* margin-top: 20px; */
            display: inline-block;
        }

        .animateTransform {
            display: inline-block;
        }

        polygon {
            cursor: pointer;
        }

        polygon:hover {
            fill: green;
        }
    </style>
</head>

<body>
    <main>
        <div class="stage">
            <div class="circle">
                <svg width="185" height="100">
                    <circle cx="30" cy="50" r="25" />
                    <circle cx="90" cy="50" r="25" class="red" />
                    <circle cx="150" cy="50" r="25" class="fancy" />
                </svg>
            </div>

            <div class="line">
                <svg width="200" height="100">
                    <line x1="0" y1="50" x2="200" y2="50" style="stroke:rgb(0,0,0);stroke-width:3px" />
                </svg>
            </div>

            <div class="polyline">
                <svg width="30" height="100">
                    <polyline points="0,25 30,50 0,75" fill="none" stroke="black" />
                </svg>
            </div>

            <div class="rect">
                <svg width="200" height="100">
                    <rect x="0" y="0" height="100" width="200"
                        style="stroke:#70d5dd;fill:transparent;stroke-width:3px" />
                </svg>
            </div>

            <div class="ellipse">
                <svg width="106" height="100">
                    <ellipse cx="53" cy="50" rx="50" ry="30" stroke="red" stroke-width="3" fill="transparent" />
                </svg>
            </div>

            <div class="polygon">
                <svg width="100" height="100">
                    <polygon fill="transparent" stroke="green" points="0,0 100,0 100,100 0,100 0,0" />
                </svg>
            </div>

            <div class="path">
                <svg width="80" height="100" id="path-svg">
                    <path d="
                          M 28,15
                          L 52,15
                          L 52,55
                          L 70,55
                          L 40,85
                          L 10,55
                          L 28,55
                          Z
                        "></path>
                </svg>
            </div>

            <div class="defs">
                <svg width="400" height="400">
                    <defs>
                        <circle id="myCircle" cx="5" cy="50" r="4" />
                    </defs>

                    <use href="#myCircle" x="5" y="0" fill="#adadad" />
                    <use href="#myCircle" x="15" y="0" fill="#dadada" />
                    <use href="#myCircle" x="25" y="0" fill="#fff" stroke="#dadada" />
                </svg>
            </div>

            <div class="animate">
                <svg width="500px" height="100px">
                    <rect id="rect" x="0" y="0" width="300" height="100" fill="#feac5e">
                        <animate attributeName="width" from="0" to="300" dur="1.5s" />
                        <!-- <animate attributeName="height" from="0" to="100" dur="1.5s" /> -->
                    </rect>
                </svg>
            </div>
        </div>

        <div class="animateTransform">
            <svg width="500px" height="500px">
                <rect x="250" y="250" width="50" height="50" fill="#4bc0c8">
                    <animateTransform attributeName="transform" type="rotate" begin="0s" dur="10s" from="0 200 200"
                        to="360 200 200" repeatCount="indefinite" />
                </rect>
            </svg>
        </div>

        <div class="pattern">
            <svg width="500" height="500">
                <defs>
                    <pattern id="dots" x="0" y="0" width="100" height="100" patternUnits="userSpaceOnUse">
                        <circle fill="#bee9e8" cx="50" cy="50" r="35" />
                    </pattern>
                </defs>
                <rect x="0" y="0" width="100%" height="100%" fill="url(#dots)" />
            </svg>
        </div>
    </main>

    <script>
        // DOM操作
        var rect = document.getElementById('rect');
        rect.addEventListener('click', function (e) {
            console.log('rect clicked');
            rect.setAttribute('width', '100');
        }, false);

        // 读取SVG源码
        var svgString = new XMLSerializer().serializeToString(document.querySelector('#path-svg'));
        console.log(svgString)
    </script>
</body>

</html>